<template>
  <div class="page-container">
    <!-- 居中的主容器 -->
    <div class="account-setting-page">
      <!-- 左侧企业信息栏 -->
      <div class="left-sidebar">
        <div class="logo-area">
          <img src="/src/img/logo.png" alt="品牌Logo" class="logo" />
        </div>
        <div class="company-info">
          <p class="company-name">南京21世纪企业</p>
          <p class="contact">联系人：陈总</p>
          <p class="contact">联系方式：18982898332</p>
        </div>
      </div>

      <!-- 右侧表单区域 -->
      <div class="right-form-area">
        <div class="top-return">
          <el-button type="text" @click="handleReturn">返回</el-button>
        </div>
        <div class="form-title">账号设置</div>
        <el-form
          :model="form"
          :rules="rules"
          ref="formRef"
          label-width="180px"
          class="account-form"
        >
          <el-form-item label="账号" prop="account">
            <el-input v-model="form.account" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="*企业名称" prop="companyName">
            <el-input v-model="form.companyName" placeholder="请输入企业名称" />
          </el-form-item>
          <el-form-item label="*联系人" prop="contactPerson">
            <el-input v-model="form.contactPerson" placeholder="请输入联系人" />
          </el-form-item>
          <el-form-item label="*手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="门店地址">
            <el-select v-model="form.province" placeholder="请选择省份" class="address-select">
              <el-option
                v-for="item in provinces"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="form.city" placeholder="请选择城市" class="address-select">
              <el-option
                v-for="item in cities"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="form.district" placeholder="请选择区域" class="address-select">
              <el-option
                v-for="item in districts"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input v-model="form.addressDetail" placeholder="请输入详细地址" class="address-detail"  />
          </el-form-item>
          <el-form-item label="*合作品牌" prop="brands">
            <el-checkbox-group v-model="form.brands">
              <el-checkbox label="蓝妮儿">蓝妮儿</el-checkbox>
              <el-checkbox label="兰蔻">兰蔻</el-checkbox>
              <el-checkbox label="雅诗兰黛">雅诗兰黛</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="*品牌导师" prop="brandTutor">
            <el-input v-model="form.brandTutor" placeholder="请输入品牌导师" />
          </el-form-item>
          <el-form-item label="*品牌经理" prop="brandManager">
            <el-input v-model="form.brandManager" placeholder="请输入品牌经理" />
          </el-form-item>
          <el-form-item label="门店头像">
            <el-upload class="upload-demo" action="#" :show-file-list="false">
               <el-icon  class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">确认提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

// 表单数据
const form = reactive({
  account: '',
  companyName: '',
  contactPerson: '',
  phone: '',
  province: '',
  city: '',
  district: '',
  addressDetail: '',
  brands: [],
  brandTutor: '',
  brandManager: ''
});

// 表单校验规则
const rules = {
  companyName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
  contactPerson: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1\d{10}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
  ],
  brands: [{ required: true, message: '请选择合作品牌', trigger: 'change' }],
  brandTutor: [{ required: true, message: '请输入品牌导师', trigger: 'blur' }],
  brandManager: [{ required: true, message: '请输入品牌经理', trigger: 'blur' }]
};

// 表单引用
const formRef = ref(null);

// 省市区模拟数据
const provinces = [
  { label: '浙江省', value: '浙江省' },
  { label: '江苏省', value: '江苏省' },
  { label: '广东省', value: '广东省' }
];
const cities = [
  { label: '淮安市', value: '淮安市' },
  { label: '南京市', value: '南京市' },
  { label: '杭州市', value: '杭州市' }
];
const districts = [
  { label: '清江浦区', value: '清江浦区' },
  { label: '鼓楼区', value: '鼓楼区' },
  { label: '西湖区', value: '西湖区' }
];

// 返回操作
const handleReturn = () => {
  ElMessage.info('返回上一页');
  // 实际项目中可结合路由返回，如 router.back()
};

// 提交操作
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('提交成功');
      // 实际项目中可发送请求提交表单数据
    } else {
      ElMessage.error('请填写完整必填项');
      return false;
    }
  });
};
</script>

<style scoped>
/* 页面外层容器 - 负责居中主内容 */
.page-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px 0; /* 上下留白 */
}

/* 主内容容器 - 限制宽度并居中 */
.account-setting-page {
  display: flex;
  width: 100%;
  max-width: 1200px; /* 最大宽度，根据设计调整 */
  min-height: calc(100vh - 40px); /* 减去外层padding高度 */
  margin: 0 auto; /* 水平居中 */
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); /* 增加阴影增强层次感 */
  border-radius: 8px; /* 轻微圆角 */
  overflow: hidden;
}

/* 左侧企业信息栏 */
.left-sidebar {
  width: 280px; /* 固定宽度，适配居中布局 */
  /* background-color: #e6f2ff; */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  box-sizing: border-box;
}

.logo-area {
  margin-bottom: 30px;
}

.logo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.8); /* 增加边框增强立体感 */
}

.company-info {
  text-align: center;
  width: 100%;
}

.company-name {
  font-size: 18px;
  font-weight: 600;
  color: #1f2329;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #b3d1ff;
}

.contact {
  font-size: 14px;
  color: #4e5969;
  margin-bottom: 10px;
  line-height: 1.6;
}

/* 右侧表单区域 */
.right-form-area {
  flex: 1;
  padding: 30px 50px; /* 增加左右内边距，适配居中布局 */
  box-sizing: border-box;
  overflow-y: auto; /* 内容过多时可滚动 */
}

.top-return {
  text-align: right;
  margin-bottom: 25px;
}

.form-title {
  background-color: #f5f7fa;
  padding: 12px 20px;
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 500;
  color: #1f2329;
  border-left: 4px solid #409eff; /* 左侧标识线增强标题感 */
}

.account-form {
  width: 100%;
  max-width: 600px; /* 表单最大宽度，避免过宽 */
}

/* 地址选择器样式调整 */
.address-select {
  width: 140px;
  margin-right: 12px;
}

.address-detail {
  width:  50%
}

/* 上传按钮样式 */
.upload-demo {
  margin-top: 10px;
}

/* 响应式调整 - 小屏幕下堆叠布局 */
@media (max-width: 900px) {
  .account-setting-page {
    flex-direction: column;
    max-width: 100%;
    margin: 0 15px;
  }
  
  .left-sidebar {
    width: 100%;
    padding: 30px 20px;
  }
  
  .right-form-area {
    padding: 20px 30px;
  }
  
  .address-select {
    width: 30%;
    margin-right: 3%;
  }
  
  .address-detail {
    width: 100%;
    margin-top: 15px;
  }
}


.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  border: solid 1px #eee;
}
</style>